<template>
  <div id="page-editPersonal">
    <topHeader title="编辑个人信息" :show-right="true"  @on-click-right ="submitInfo">
      <template v-slot:right>
        <p class="submit-info">完成</p>
      </template>
    </topHeader>
    <group class="group">
      <x-input  style="padding-right: 0!important"
        title="姓名"
        :show-clear="showClear"
        placeholder="请输入姓名（汉字或字母）"
        v-model = "userName"
        placeholder-align="right"
      ></x-input>
      <xgender v-model="gender" @submitGender="submitGender"></xgender>
      <!-- <cell title="出生时间" :value="birthDate" is-link></cell> -->
      <calendar
        valueAlign="right"
        default-str="请选择日期"
        :birthDate="birthDate"
        titleValue="出生时间"
        @getSelectDate="getBirthday"
      />

      <xaddress
        placeholder="选择出生地点"
        class="xaddress"
        :address="birthAddress"
        valueAlign="right"
        @getAddress="getBirthAddress"
      />
    </group>
  </div>
</template>
<script>
import topHeader from "@/components/topHeader";
import xaddress from "@/components/chooseAddress";
import xgender from "@/components/chooseGender";
import calendar from "@/components/calendar/calendar.vue";
import { Cell, Group, XInput } from "vux";
import tool from "@/assets/js/tool";
export default {
  data() {
    return {
      gender: undefined,
      birthDate: "",
      birthAddress: [], // 出生地址
      // uid: '869115037298615,869115037349111',
      uid: this.$store.state.userID,
      userName: '',
      showClear: false,
      solarDate: '',// 公历生日
      nopoint:'',// 时辰是否清楚
      submitAddress: null,// 提交的地址
    };
  },
  created() {
    this.$store.commit('changePageLoading',true);
    this.getPersonalInfo();
  },
  components: {
    topHeader,
    Group,
    Cell,
    xaddress,
    xgender,
    calendar,
    XInput
  },
  methods: {
    // 请求用户信息接口
    getPersonalInfo() {
      var uid = this.uid
      this.$fetch
        .post("/app/Jmyc/user_edit", {
          device: uid
        })
        .then(res => {
          if (res.code == 200 && res.data) {
            this.birthAddress = res.data.province
              ? [res.data.province, res.data.city, res.data.country]
              : [];
            this.birthDate = res.data.birthday
              ? tool.handleBirthDate(res.data.birthday, res.data.nopoint)
              : "";
            this.nopoint = res.data.nopoint
            this.defaultString = this.birthDate ? "" : "选择出生日期";
            this.gender = res.data.sex;
            this.userName = res.data.realname
          } else {
            this.gender = Math.random() + 2;
            this.birthDate = "";
            this.defaultString = "请选择出生日期";
            this.birthAddress = [];
          }
          this.$store.commit('changePageLoading',false);
          // console.log(this.defaultString, this.birthDate,this.gender);
        });
    },
    // 提交编辑的信息
    submitInfo() {
      //toast公共配置
      var totalConfig = {
        type: "text",
        text: "",
        position: "top",
        time: 1000
      };
      if(!this.userName){
        totalConfig.text = '请填写姓名'
        this.$vux.toast.show(totalConfig)
      }else if(!this.gender){
        totalConfig.text = '请选择性别'
        this.$vux.toast.show(totalConfig)
      }else if (this.solarDate == '' && this.birthDate == '') {
        totalConfig.text = '请选择出生日期'
        this.$vux.toast.show(totalConfig)
      }else if(!this.submitAddress && this.birthAddress.length == 0){
        totalConfig.text = '请选择出生地点'
        this.$vux.toast.show(totalConfig)
      }else {
        var that = this
        var params = {
          device: that.uid,
          username: that.userName,
          sex: that.gender,
          nopoint: that.nopoint,
          address: that.submitAddress || that.birthAddress+ ''
        }
        if(that.solarDate){
          params.birthday = that.solarDate
        }
        that.$fetch.post("/app/Jmyc/user_edit", params)
        .then(res => {
          // console.log(res)
          if (res.code == 200) {
            that.saveUserInfo(params)
            if(params.birthday){
              window.localStorage.JMYC_BIRTHDATE = that.handleTime(params.birthday)
            }
            totalConfig.text = "修改成功";
          } else {
            totalConfig.text = "保存失败，请稍后重试";
            that.birthDate = "";
          }
          that.$vux.toast.show(totalConfig)
          setTimeout(()=>{
            that.$router.back()
          },1000)
          return
        });
      }
    },
    // 将修改后的信息保存至缓存
    saveUserInfo(params){
        window.localStorage.JMYC_USERADRESS = params.address
        window.localStorage.JMYC_USERGENDER = params.sex
        window.localStorage.JMYC_USERNAME = params.username
        window.localStorage.JMYC_NOPOINT = params.nopoint
    },
    // 获取组件选择的日期
    getBirthday(val) {
      this.solarDate = val.solarDate;
      this.nopoint = val.noPoint;
    },
    // 获取地址栏选择的地址
    getBirthAddress(val) {
      this.submitAddress = val + ''
    },
    // 获取性别选择组件的值
    submitGender(val) {
      this.gender = val
    },
    // 对选择的日期进行处理 1993-4-4 04:00 转换为1993-04-04 04:00
    handleTime(time){
      // 将1993-4-4 04:00转换为时间戳
      let date = new Date(time.replace(/-/g,'/'))
      // 转换为时间戳 精确到秒
      let timeStap = date.getTime()/1000
      // 将时间戳转换为时间
      return tool.timestampToTime(timeStap)
    },
  }
}
</script>
<style lang="less">
@import "./index.less";
</style>